<template>
  <div class="trade-container">
    <div style="padding: 10px;background-color: #ffffff">
      <el-button type="primary" @click="addPerson">新增</el-button>
    </div>
    <div>
      <el-table ref="multipleTable"
                :data="tableData.data"
                tooltip-effect="dark"
                stripe
                highlight-selection-row
                max-height="750"
                style="width: 100%">
        <el-table-column prop="fairName" label="展会名称" fixed="right"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" fixed="right"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" fixed="right"></el-table-column>
        <el-table-column label="操作" fixed="right" width="90">
          <template #default="scope">
            <el-link type="primary" @click="editInfo(scope.row)">修改</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <addExhibition :showExhibition="showExhibition" @showExhibitionEmit="showExhibitionEmit"></addExhibition>
  <editExhibition :editShowExhibition="editShowExhibition" @editShowExhibitionEmit="editShowExhibitionEmit" :id="editId" :fairName="fairName"></editExhibition>
</template>

<script setup>
import { ref, reactive } from "vue";
import {useRouter} from "vue-router";
import {ElMessage, ElMessageBox} from "element-plus";
import {_getExhibitionList} from "../../http/api.js";
import addExhibition from './addExhibition.vue'
import editExhibition from './editExhibition.vue'
const router = useRouter();
const loginId = sessionStorage.getItem('loginId');
const showExhibition = ref(false)
const editShowExhibition = ref(false)
const tableData = reactive({ // 表格数据
  data:[]
})
if(!loginId) {
  ElMessage({message: '操作异常', type: 'error' });
  localStorage.clear();
  sessionStorage.clear();
  router.replace({ path: '/'})
}
const editId = ref(''); // 编辑修改数据的id
const fairName = ref(''); // 编辑修改数据的名称
// 获取展会列表
const getExhibitionList = () => {
  _getExhibitionList()
      .then(res => {
        console.log(res);
        if(res.data.ok) {
          let records = res.data.data;
          tableData.data = records;
        }
      })
      .catch(err => {
        console.log(err);
      })
}
getExhibitionList()
// 新增展会
const addPerson = () => {
  editId.value = '';
  fairName.value = '';
  showExhibition.value = true
}
// 修改展会
const editInfo = (item) => {
  console.log(item)
  editId.value = item.id;
  fairName.value = item.fairName;
  editShowExhibition.value = true

}
// 监听弹框关闭
const showExhibitionEmit = (boolean) => {
  showExhibition.value = boolean;
  getExhibitionList()
}
// 监听修改弹框
const editShowExhibitionEmit = (boolean) => {
  editShowExhibition.value = boolean;
  editId.value = '';
  fairName.value = '';
  getExhibitionList()
}
</script>

<style lang="scss" scoped>
.trade-container{
  padding: 10px;
}
.icon-style{
  font-size: 24px;
  cursor: pointer;
}
.face-img-box{
  width: 50px;
  height: 65px;
}
</style>
